<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8" />
		<title>汉字转拼音的jQuery插件 </title>
		<style type="text/css">
			<!-- #content {
				border: 1px #dbdbdb solid;
				width: 700px;
				height: 50px;
				padding: 10px;
				font-size: 13px;
				line-height: 23px;
				letter-spacing: 15px;
			}
			
			#show {
				border: 1px #dbdbdb solid;
				width: 700px;
				height: 50px;
				padding: 10px;
				font-size: 12px;
				color: #FF0000;
				line-height: 23px;
				margin-top: 2px;
				letter-spacing: 1px;
				overflow-x: hide;
				overflow-y: auto;
			}
			
			#show a {
				color: #FF0000;
				font-size: 13px;
				font-weight: bold
			}
			
			-->
		</style>

		<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
		<script type="text/javascript" src="js/jQuery.Hz2Py-min.js"></script>
		<script>
			$(function() {
				$("#content").on("keyup keydown change blur", function() {
					$("#show").val($(this).toPinyin());
				});
			});
		</script>
	</head>

	<body>
		<div id="top">
			<h2 class="subtitle"> JQuery让你的前端设计更精彩，当然原生js也可以实现！</h2>

			<center>
				<textarea id="content">
</textarea>
				<br />
				<textarea id="show"></textarea>
			</center>
	</body>

</html>